<template>
  <monitor-page
    type="hydrogenMonitor"
    :queryFormItem="queryFormItem"
    :collapseFormItem="collapseFormItem"
  />
</template>

<script>
import monitorPage from '../components/monitorPage.vue'
import { typeClassName } from "@/pages/config/classNameMap";
import mixin from "@/pages/components/mixins/mixin";

export default {
  components: { monitorPage },
  mixins: [mixin],
  computed: {
    queryFormItem() {
      return [
        {
          key: "point",
          title: {
            "zh-CN": "能源点位",
            "en-US": "point",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.pointOptions },
        },
        {
          key: "scale",
          title: {
            "zh-CN": "粒度",
            "en-US": "scale",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "select", options: this.scaleOptions },
        },
        {
          key: "timeRange",
          title: {
            "zh-CN": "时间区间",
            "en-US": "timeRange",
          }[this.G_Locale],
          minWidth: 100,
          align: "center",
          config: { type: "datetimeRange" },
        },
      ];
    },
    collapseFormItem() {
      return [
         {
           key: "point",
           title: {
             "zh-CN": "能源点位",
             "en-US": "point",
           }[this.G_Locale],
           minWidth: 100,
           align: "center",
           config: { type: "select", options: this.pointOptions },
         },
         {
           key: "scale",
           title: {
             "zh-CN": "粒度",
             "en-US": "scale",
           }[this.G_Locale],
           minWidth: 100,
           align: "center",
           config: { type: "select", options: this.scaleOptions },
         },
         {
           key: "timeRange",
           title: {
             "zh-CN": "时间区间",
             "en-US": "timeRange",
           }[this.G_Locale],
           minWidth: 100,
           align: "center",
           config: { type: "datetimeRange" },
         },
      ];
    }
  },
  data() {
    return {
      pointOptions: [],
      scaleOptions: [
        { label: "分", value: "分" },
        { label: "时", value: "时" },
        { label: "天", value: "天" },
        { label: "月", value: "月" },
        { label: "年", value: "年" },
      ],
      equipClassObject: null, // 设备实例
    }
  },
  created() {
    let condition = "className == 'Equipment' && type == 'templateDictionary' && sf_name like '%制氢%' && sf_category like '%0%'"
    this.equipClassObject = this.$modelObject.create(`${typeClassName["equipment"].modelType}Collection`);
    this.equipClassObject.query(condition).then(res => {
      this.$api.Custom.energyPoint({equipment: this.equipClassObject.records[0].id}).then((res) => {
        if (!res) {
          return;
        }
        console.log(res);
        this.pointOptions = res.map(item => {
          return {
            label: item.values.sf_energyName,
            value: item.values.point
          }
        })
      });
    })
  }
}
</script>

<style scoped lang="scss">

</style>
